<template>
  <div id="alarmHistory">
    <div></div>
    <div>
      <div></div>
      <div>
        <table border="0" cellspacing="0" cellpadding="0">
          <tr class="title">
            <th>设备名称</th>
            <th>报警位置</th>
            <th>报警时间</th>
            <th>报警原因</th>
            <th>状态</th>
          </tr>
          <tr v-for="(item, index) in table" :key="index">
            <td>{{ item.tagName }}</td>
            <td>{{ item.pos }}</td>
            <td>{{ timeTranslate(item.alarmTime) }}</td>
            <td>{{ item.alarmType }}</td>
            <td>{{ item.alarmStatus }}</td>
          </tr>
        </table>
      </div>
      <div>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
          :pager-count="pagerCount" @next-click="check" @prev-click="check" @current-change="check">
        </el-pagination>

        <!-- :pager-count=pagerCount -->
        <!-- <button type="button" class="btn-total">共 {{ pagee }} 页</button> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],

      total: 0,
      pageSize: 5,
      pagee: "",
      table: [],
      pagerCount: 7,
      currentPage: 1,
    };
  },
  mounted() {
    this.getList();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 880;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    winSize() {
      var ratioY = window.innerHeight / 880;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      //   this.shipinList();
    },
    page() {
      this.pagee = this.total / this.pageSize;
    },
    getList() {
      // setInterval(() => {
      let data = {
        token: "",
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        alarmLevel: '',
        alarmDesc: this.name,
        alarmType: ''
      }
      this.$axios({
        url: 'http://192.168.143.8:8087/hisalarm',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: this.$QS.stringify(data)
      }).then((res) => {
        console.log(res.data.rows, 'res');
        this.table = res.data.rows;
        // this.list = this.list.slice(0, 3);
        this.total = res.data.count
      })
        .catch((err) => {
          console.log(err);
        });
      
    },
    // 转换时间格式
    timeTranslate(val) {
      // 格式化时间2022-07-05T09:57:39.000Z 成 2018-08-07 00:00:00
      return this.dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },

    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;

      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getDoorAlarm();
    },
    check(res) {
      // console.log(res, 'res');
      this.currentPage = res;
      this.shipinList();
    },
    handleFilter() {
      // console.log("123456");
      this.shipinList();
    },
  },
};
</script>

<style lang="less" scoped>
#alarmHistory {
  font-weight: bold;
  // background-color: rgba(0, 0, 0, .6);

  width: 1712px;
  height: 880px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px 40px;

  box-sizing: border-box;

  >div:nth-child(1) {
    width: 100%;
    display: flex;

    >div:nth-child(1) {
      text-align: left;
      width: 479px;
      height: 71px;
      line-height: 71px;
      background: linear-gradient(93deg,
          rgba(0, 119, 245, 0.5),
          rgba(0, 118, 245, 0));
      font-family: Source Han Sans CN;
      font-size: 40px;
      color: #fff;
      white-space: pre;

      >span {
        display: inline-block;
        margin-left: 30px;
        font-weight: 400;
      }
    }

    >div:nth-child(2) {
      text-align: left;
      flex: 0.9;
      height: 71px;
      line-height: 71px;
      font-family: Source Han Sans CN;
      font-size: 28px;
      color: #fff;
      white-space: pre;

      >span {
        display: inline-block;
        // margin-left: 10px;
      }

      >input {
        display: inline-block;
        width: 50%;
        font-size: 28px;
        border: none;
        background: none;
        border-bottom: 1px solid #fff;
        color: #fff;
      }

      >input:focus {
        outline: none;
      }
    }

    >div:nth-child(3) {
      text-align: left;
      width: 280px;
      // background-color: #fff;
      height: 71px;
      line-height: 71px;
      font-family: Source Han Sans CN;
      font-size: 38px;
      color: #fff;
      white-space: pre;

      >span {
        /* display: inline-block; */
        margin-left: 10px;
      }

      >input {
        display: inline-block;
        width: 80%;
        font-size: 38px;
        border: none;
        background: none;
        border-bottom: 1px solid #fff;
        color: #fff;
      }

      >input:focus {
        outline: none;
      }
    }

    >div:nth-child(4) {
      text-align: left;
      flex: 1;
      height: 71px;
      line-height: 71px;
      font-family: Source Han Sans CN;
      font-size: 38px;
      color: #fff;
      white-space: pre;

      >span {
        display: inline-block;
        margin-left: 20px;
      }

      >input {
        display: inline-block;
        width: 45%;
        font-size: 38px;
        border: none;
        background: none;
        border-bottom: 1px solid #fff;
        color: #fff;
      }

      >input:focus {
        outline: none;
      }
    }

    >div:nth-child(5) {
      flex: 1;
      text-align: right;

      img {
        cursor: pointer;
      }
    }
  }

  >div:nth-child(2) {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    >div:nth-child(1) {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 34px;
      color: #fff;
      // height: 86px;
      line-height: 86px;
      // margin-top: 29px;
    }

    >div:nth-child(2) {
      height: 100%;

      table {
        width: 100%;
        height: 100%;
        text-align: center;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 3;
        overflow: hidden;
        font-weight: bold;

        th {
          height: 100px;
          color: #fff;
          // width: 100%;
          // display: flex;
          // justify-content: space-around;
          // align-items: center;
          font-size: 50px;
          text-align: center;
        }

        >tr:first-child {
          background-color: rgba(33, 76, 109, 0.5);
        }

        tr {
          height: 125px;
          color: #fff;
          width: 100%;
          // display: flex;
          // justify-content: space-around;
          // align-items: center;
          font-size: 37px;

          td {
            border-bottom: 2px solid #fff;
          }

          // text-align: center;

          // td:nth-child(1) {
          //     flex: 1;
          // }

          // td:nth-child(2) {
          //     flex: 1;
          // }

          // td:nth-child(3) {
          //     flex: 1;
          // }

          // td:nth-child(4) {
          //     flex: 1;
          // }

          // td:nth-child(5) {
          //     flex: 1;
          // }

          // td:nth-child(6) {
          //     flex: 1;
          // }
        }
      }
    }

    >div:nth-child(3) {
      margin: 24px 15px 0;
      height: 46px;
      display: flex;
      color: #fff;
      font-size: 24px;
      // padding: 17px 15px;
      justify-content: center;
      align-items: center;

      .btn-total {
        background-color: rgba(2, 4, 13, 0.5) !important;
        border: 2px solid #00ffff;
        color: #fff;
        font-size: 26px;
        height: 28px;
        padding: 0 23px;
        box-sizing: border-box;
        border-radius: 3px;
        height: 35px;
      }
    }
  }

  // >div:nth-child(3) {
  //     margin: 24px 15px;
  //     height: 46px;
  //     display: flex;
  //     color: #fff;
  //     font-size: 24px;
  //     // padding: 17px 15px;
  //     justify-content: center;
  //     align-items: center;

  //     .btn-total {
  //         background-color: rgba(2, 4, 13, 0.5) !important;
  //         border: 2px solid #00FFFF;
  //         color: #fff;
  //         font-size: 26px;
  //         height: 28px;
  //         padding: 0 23px;
  //         border-radius: 3px;
  //         height: 35px;
  //     }
  // }
}

.title {
  font-weight: bold;
}

::v-deep .el-pagination.is-background ul li {
  background-color: rgba(2, 4, 13, 0.5) !important;
  color: #fff;
  height: 50px;
  line-height: 50px;
  // width: 55px;
  padding: 0 15px;
  font-size: 35px;
  font-weight: 700;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  border: 2px solid #00ffff;
  color: #00ffff;
}

::v-deep .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: rgba(2, 4, 13, 0.5) !important;
  height: 50px;
  width: 55px;
}

::v-deep .btn-prev {
  background-color: rgba(2, 4, 13, 0.5) !important;
  height: 50px;
  width: 55px;
}
</style>
